
<?php $this->load->view('datan/chart_header');?>
    <style>
        .main {
            height: <?php echo $_GET['height'] ? intval($_GET['height']) : 400?>px;
            overflow: hidden;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #e3e3e3;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
            -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
        }
    </style>
    <script src="../public/Lib/echarts-2.2.7/build/dist/echarts-all.js"></script>
    <script type="text/javascript" src="<?php echo URLPRE;?>static/public/Lib/Kalendajs/build/kalendae.standalone.js"></script>
    <link href="<?php echo URLPRE;?>static/public/Lib/Kalendajs/build/kalendae.css" rel="stylesheet" />
    <link href="<?php echo URLPRE;?>static/admin/css/admin_full.css" rel="stylesheet" />
    <div class="main" id="main1" style="height:<?php echo $_GET['height'] ? intval($_GET['height']) : 400?>px;"></div>

    <script>


        var myChart = echarts.init(document.getElementById('main1'));

        var option = {
            <?php if(!$_GET['ifr']){?>
            dataZoom : {
                show : true,
                realtime : true,
                //orient: 'vertical',   // 'horizontal'
                //x: 0,
//            y: 36,
                //width: 400,
                height: 20,
                backgroundColor: 'rgba(221,160,221,0.5)',
                dataBackgroundColor: 'rgba(138,43,226,0.5)',
                fillerColor: 'rgba(38,143,26,0.6)',
                handleColor: 'rgba(128,43,16,0.8)',
                //xAxisIndex:[],
                //yAxisIndex:[],
                start : 0,
                end : 100
            },
            <?php }?>
            title : {
                text: '客户年龄段分析'
            },
            theme:'infographic',
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data:['客户数量']
            },
            toolbox: {
                show : true,
                orient: 'vertical',
                x: 'right',
                y: 'center',
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    name : '年龄',
                    data : ['<?php echo implode('\',\'', $x_list)?>']
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    name : '数量',
                    axisLabel : {
                        formatter: '{value} 人次'
                    }
                }
            ],
            series : [
                {
                    name:'数量',
                    type:'bar',
                    stack: '搜索引擎',
                    data:[<?php echo implode(',', $y_list)?>]
                }
            ]
        };

        myChart.setOption(option);
    </script>
<?php $this->load->view('datan/chart_footer');?>